// Facebook post view
window.FBPostView = Backbone.View.extend({
  tagName: "div",
  className: "fbpost-container",
  // associate Underscore.js template
  template: _.template($("#fbpost-template").html()),

  initialize: function() {
    // events on the model
    this.model.on('change', this.render, this);
    this.model.on('destroy', this.remove, this);

    // put the same id on the DOM element and the model instance
    this.$el.id=this.model.get('id');
  },

  render: function() {
    // display the html
    this.$el.html(this.template(this.model.toJSON()));

    // put the model instance's id as the DOM element's rel attribute
    this.$el.attr('rel', this.model.get('id'));

    // change image size depending on popularity
    nbLikes = this.model.get('likes');
    isFromPage =  this.model.get('from_page'); // 0: from user, 1: from fb page
    if ((nbLikes<5 && isFromPage==0) || (nbLikes<200 && isFromPage==1)) {
      this.$el.children()[1].className="img-size1";
      this.$el.children()[0].style.marginLeft="-30px";
      this.$el.children()[0].style.marginTop="-45px";
      this.$el.children()[2].style.marginLeft="-35px";
      this.$el.children()[2].style.marginTop="25px";
    }
    if ((nbLikes>=5 && isFromPage==0) || (nbLikes>=200 && isFromPage==1)) {
      this.$el.children()[1].className="img-size2";
      this.$el.children()[0].style.marginLeft="-40px";
      this.$el.children()[0].style.marginTop="-55px";
      this.$el.children()[2].style.marginLeft="-45px";
      this.$el.children()[2].style.marginTop="35px";
    }
    if ((nbLikes>=10 && isFromPage==0) || (nbLikes>=2000 && isFromPage==1)) {
      this.$el.children()[1].className="img-size3";
      this.$el.children()[0].style.marginLeft="-50px";
      this.$el.children()[0].style.marginTop="-65px";
      this.$el.children()[2].style.marginLeft="-55px";
      this.$el.children()[2].style.marginTop="45px";
    }
    if ((nbLikes>=20 && isFromPage==0) || (nbLikes>=20000 && isFromPage==1)) {
      this.$el.children()[1].className="img-size4";
      this.$el.children()[0].style.marginLeft="-60px";
      this.$el.children()[0].style.marginTop="-75px";
      this.$el.children()[2].style.marginLeft="-65px";
      this.$el.children()[2].style.marginTop="55px";
    }
    return this;
  },

  remove: function() {
    // decrease image size
    this.$el.children()[1].className="img-size0";
    // remove DOM element
    this.$el.remove();
  },

  // events on the element
  events: {
    "mouseenter" : "showMessage",
    "mouseleave" : "eraseMessage",
    "dblclick" : "openURL"
  },

  // message display
  showMessage: function() {
    // display the bubbles
    this.$el.children()[0].className="visible"; // div id="fb-name"
    this.$el.children()[2].className="visible"; // div id="fb-bubble"

    if (enableSound==1)
      this.tellMessage();

    enhanceShadow(this.$el.children()[1]); // enhance shadow around the picture

    if (showLinks==1 && offlineMode==0)
      this.drawLink();
  },

  eraseMessage: function() {
    // hide the bubbles
    this.$el.children()[0].className="hidden";
    this.$el.children()[2].className="hidden";

    reduceShadow(this.$el.children()[1]); // reduce shadow around the picture

    if (offlineMode==0)
    this.eraseLink(); // hide facebook friends links
  },

  // message spelling, using speak.js
  tellMessage: function() {
    speak(this.model.get('message'));
  },

  // put a shadow-box on friends' picture and self's
  drawLink: function() {
    for (i=0; i<this.model.collection.length; i++) {
      if (this.model.get('from_id') == this.model.collection.models[i].get('from_id')) {
        enhanceShadow($("div.fbpost-container[rel="+
          this.model.collection.models[i].get('id')+"]").children()[1]);
        /*createLine(this.model.get('pos_x'), this.model.get('pos_y'),
          this.model.collection.models[i].get('pos_x'), this.model.collection.models[i].get('pos_y'));*/
      }
    }
    for (i=1; i<fbPosts.length+1; i++) {
      if (friendRelations[fbPosts.indexOf(this.model)][i] &&
        friendRelations[fbPosts.indexOf(this.model)][i]!=-1) {
        enhanceShadow($("div.fbpost-container[rel="+
          friendRelations[fbPosts.indexOf(this.model)][i]+"]").children()[1]);
      }
    }
  },

  eraseLink: function() {
    for (i=0; i<this.model.collection.length; i++) {
      if (this.model.get('from_id') == this.model.collection.models[i].get('from_id')) {
        reduceShadow($("div.fbpost-container[rel="+
          this.model.collection.models[i].get('id')+"]").children()[1]);
      }
    }
    for (i=1; i<fbPosts.length+1; i++) {
      if (friendRelations[fbPosts.indexOf(this.model)][i] &&
        friendRelations[fbPosts.indexOf(this.model)][i]!=-1) {
        reduceShadow($("div.fbpost-container[rel="+
          friendRelations[fbPosts.indexOf(this.model)][i]+"]").children()[1]);
      }
    }
  },

  // open the link of the post in a new tab
  openURL: function() {
    window.open('https://www.facebook.com/'+this.model.get('id'));
  }
});